import React, { Component } from "react";
import { PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
import { Button, message, Modal, Input } from "antd";
import { getVideoListCategory, addVideoCategory, modifyVideoCategory } from "@/api/video";
import TableComponent from '@/components/TableList';
class User extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    isModalVisible: false, // 编辑新增 显示控制
    currentRowData: {},
    loading: false,
    inputValue: '',
    sort: '',
    catId: '',
    listQuery: {},
    editMode: false // 添加 编辑模式
  };


  handleDlete = (row) => {
    // const { id } = row
    // if (id === "admin") {
    //   message.error("不能删除管理员用户！")
    //   return
    // }
    // deleteUser({ id }).then(res => {
    //   message.success("删除成功")
    //   this.getUsers();
    // })
  }

  hadnleAditAddOkHandler = (values, form) => {
    if (!this.state.inputValue.trim()) {
      return message.info('请输入视频分类名称');
    }
    if (!(/(^[1-9]\d*$)/.test(this.state.sort))) {
      return message.info('视频分类排序必须为正整数');
    }
    this.setState({
      loading: true
    })
    const params = {
      // parentId: 0, // 视频父级分类ID（暂时全部传0，目前只有一级）
      name: this.state.inputValue, // 视频分类名称
      sort: this.state.sort,  // 视频分类排序
      // level: -1  // 视频分类级别（暂时全部传-1）
    };
    const handler = this.state.editMode ? modifyVideoCategory : addVideoCategory;
    if (this.state.editMode) {
      params.id = this.state.catId;
    }
    handler(params).then(() => {
      this.tableRef.current.fetchData();
      message.success(this.state.editMode ? "修改成功 !" : "新增成功 !")
    }).catch(e => {
      message.error("操作失败 !")
    }).finally(() => {
      this.setState({
        isModalVisible: false,
        loading: false,
        inputValue: '',
        sort: ''
      });
    });

  };


  handleAddCategory = (row) => {
    this.setState({
      isModalVisible: true,
      editMode: false
    });
  };

  handleEditCat = (row) => {
    this.setState({
      isModalVisible: true,
      editMode: true,
      sort: row.sort,
      catId: row.id,
      inputValue: row.name
    });
  };

  handleCancelAdd = () => {
    this.setState({
      inputValue: '',
      sort: '',
      isModalVisible: false,
    })
  };
  handleInputCHange = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  };
  handleSortInputCHange = (e) => {
    this.setState({
      sort: e.target.value
    });
  };


  // 表格列 字段定义
  columns = [
    {
      title: '视频分类ID',
      dataIndex: 'id',
      key: 'id',
    },
    // {
    //   title: '父级分类ID',
    //   dataIndex: 'parentId',
    //   key: 'parentId',
    // },
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    // {
    //   title: '分类级别',
    //   dataIndex: 'level',
    //   key: 'level',
    // },
    {
      title: '分类排序',
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: 'updateTime',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, row) => (
        <>
          <Button type="primary" shape="circle" icon={<EditOutlined />} title="edit" onClick={this.handleEditCat.bind(null, row)} />
          {/* <Divider type="vertical" />
          <Button type="primary" shape="circle" icon={<DeleteOutlined />} title="delete" onClick={this.handleDlete.bind(null, row)} /> */}
        </>
      )
    }

  ];
  render() {

    return (
      <>
        <Button type='primary' onClick={this.handleAddCategory} icon={<PlusCircleOutlined />}>新增分类</Button>
        <br />
        <br />
        <br />
        <TableComponent getTableListApi={getVideoListCategory} columns={this.columns} queryParams={this.state.listQuery} ref={this.tableRef} onGetData={this.handleGetData} />
        <Modal confirmLoading={this.state.loading} title={this.state.editMode ? "修改视频分类" : "增加视频分类"} visible={this.state.isModalVisible} onOk={this.hadnleAditAddOkHandler} onCancel={this.handleCancelAdd}>
          <h5 >视频分类名称</h5>
          <Input className='mb10' placeholder='请输入视频分类名称.' value={this.state.inputValue} onChange={this.handleInputCHange} />
          <h5 >视频分类排序</h5>
          <Input className='mb10' placeholder='请输入视频分类排序,正整数.' value={this.state.sort} type='number'  onChange={this.handleSortInputCHange} />
        </Modal>
      </>
    );
  }
}

export default User;
